<template>
	<view class="head_image" :style="loaded ? 'background-image: url('+placeholdSrc+');background-size: 100% 100%;':''">
		<image @tap="previewImage" @error="isError" @load="onLoaded" :src="realSrc" v-show="loaded && isHttp"></image>
		<view class="real-image" :class="loaded && isHttp ? 'loaded':''" @tap="previewImage">
			<image :src="placeholdSrc"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			realSrc: {
				type: String,
				default: ""
			},
			img_urls: Array,
			isLarge: { //是否大图查看头像并上传
				type: [Boolean, String],
				default: false
			}
		},
		data() {
			return {
				loaded: false,
				placeholdSrc: this.defimg,
				isHttp: false
			}
		},
		methods: {
			isError() {
				this.loaded = false;
			},
			// 图片加载
			onLoaded() {
				this.loaded = true;
				var header = this.realSrc.substring(0, 7);
				if (header == 'http://' || header == 'https:/') {
					this.isHttp = true;
				}
			},
			// 预览
			previewImage: function() {
				if(this.isLarge) {
					var url = this.placeholdSrc;
					if(this.loaded && this.isHttp) {
						url = this.realSrc;
					}
					uni.navigateTo({
						url: '/pages/personInfo/avatarHandle?url='+url
					})
				} else {
					if (this.img_urls && this.img_urls.length > 0) {
						if(this.loaded && this.isHttp) {
							uni.previewImage({
								current: this.realSrc,
								urls: this.img_urls
							});
						} else {
							uni.previewImage({
								current: this.placeholdSrc,
								urls: [this.placeholdSrc]
							});
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.head_image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		z-index: 9;
	}

	.real-image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		top: 0;
		left: 0;
	}

	.loaded {
		opacity: 0;
	}
</style>
